<template>
  <div class="toast">{{message}}</div>
</template>


<script>
import { reactive , toRefs } from 'vue';

export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name:'Toast',
    props:['message']
}
export const useToastEffect = ()=>{
    const toastData=reactive({
            show: false,
            toastMessage: ''
        })
    
    const showToast = (message) => {
        toastData.show = true
        toastData.toastMessage = message
            //设置定时器取消显示
            setTimeout(() => {
                toastData.show = false
                toastData.toastMessage = ''
            }, 2000)
        }
        const {show,toastMessage}=toRefs(toastData);
        return{
            show,
            toastMessage,
            showToast
        }
}
</script>


<style lang="scss" scoped>
@import '../style/viriables.scss';
.toast{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: .1rem;
    background: rgba(0,0,0,.35);
    border-radius: .05rem;
    color: $bgColor;
}
</style>